<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search v-on:clear="clearFn" v-on:focus="focusFn" v-on:search="searchFn" shape="round" input-align="center" v-model="value" placeholder="请输入搜索关键词" />
    <!-- 热搜标签 -->
    <div v-if="!isSearch" class="suggestions">
      <van-tag v-on:click="clickSuggest" v-for="(item,index) in reshouList" :key="index" round plain type="primary" size="large" color="#fff" text-color="#000000">{{item.first}}</van-tag>
    </div>
    <!-- 搜索结果 -->
    <div v-else class="results">
      <!-- 搜索类型选择 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="searchResultValue" :options="searchResultOption" v-on:change="valueChange" />
      </van-dropdown-menu>
      <!-- 歌单列表 -->
      <div class="gedan_res">
        <van-list :offset="900" v-if="changeListShow && searchResultValue===1000" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in gedanList" :key="item.id" v-on:click="$router.push(`/gedandetail?id=${item.id}`)">
            <template>
              <div class="img">
                <van-image width="100%" height="100%" :src="item.coverImgUrl"></van-image>
              </div>
              <div class="panels">
                <p>{{item.name}}</p>
              </div>
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </van-list>
      </div>
      <!-- mv列表 -->
      <div class="mv_res">
        <van-list :offset="900" v-if="changeListShow && searchResultValue===1004" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in mvList" :key="item.id" v-on:click="$router.push(`/mvDetail?id=${item.id}`)">
            <template>
              <div class="mvs">
                <div class="mvs_cover">
                  <van-image width="100%" height="100%" :src="item.cover" />
                  <span class="mvs_info">
                    {{item.name}}
                  </span>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
      <!-- 音乐列表 -->
      <div class="music_res">
        <van-list :offset="800" v-if="changeListShow && searchResultValue===1" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in musicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
            <template>
              <div class="music_s">
                <div class="m_name">{{item.name}}</div>
                <div class="s_name">{{item.artists[0].name}}</div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </div>
    <!-- 加载loading -->
    <van-loading v-if="!changeListShow" color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
  </div>
</template>

<script>
import { getResouliebiao, search } from '../../../utils/api'
export default {
  name: 'Search',
  data () {
    return {
      // 搜索的关键字
      value: '',
      // 热搜列表
      reshouList: [],
      // 是否正在搜索
      isSearch: false,
      // 当前搜索类型
      searchResultValue: 1,
      // 全部搜素类型
      searchResultOption: [{
        text: '歌曲',
        value: 1
      }, {
        text: '歌单',
        value: 1000
      }, {
        text: 'MV',
        value: 1004
      }],
      loading: false,
      finished: false,
      // 歌单数组
      gedanList: [],
      // mv数组
      mvList: [],
      // 音乐数组
      musicList: [],
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      changeListShow: true,
      // 每次限制的数量
      limit: 15,
      // 每次的偏移量
      offset: 0,
      // 总数
      total: 0
    };
  },
  methods: {
    // 获取热搜列表
    async getResouliebiaoFn () {
      let result = await getResouliebiao();
      if (result.code === 200) {
        this.reshouList = result.result.hots;
      }
    },
    // 搜索事件
    async searchFn (value) {
      let result = await search(value, this.limit, 0, this.searchResultValue);
      if (this.searchResultValue === 1) {
        if (result.code === 200) {
          this.musicList = result.result.songs;
          this.total = result.songCount;
          this.offset = 0;
          this.finished = false;
        }
      } else if (this.searchResultValue === 1000) {
        if (result.code === 200) {
          this.gedanList = result.result.playlists;
          this.total = result.playlistCount;
          this.offset = 0;
          this.finished = false;
        }
      } else if (this.searchResultValue === 1004) {
        if (result.code === 200) {
          this.mvList = result.result.mvs;
          this.total = result.mvCount;
          this.offset = 0;
          this.finished = false;
        }
      }
      this.isSearch = true;
    },
    // 切换搜索类型
    async valueChange (type) {
      this.changeListShow = false;
      this.mvList = [];
      this.gedanList = [];
      this.musicList = [];
      this.finished = false;
      if (this.value !== '') {
        let result = await search(this.value, this.limit, 0, this.searchResultValue);
        if (type === 1000) {
          if (result.code === 200) {
            this.gedanList = result.result.playlists;
            this.total = result.playlistCount;
            this.offset = 0;
          }
        } else if (type === 1004) {
          if (result.code === 200) {
            this.mvList = result.result.mvs;
            this.total = result.mvCount;
            this.offset = 0;
          }
        } else if (type === 1) {
          if (result.code === 200) {
            this.musicList = result.result.songs;
            this.total = result.songCount;
            this.offset = 0;
          }
        }
      }
      this.changeListShow = true;
    },
    // 点击热搜
    clickSuggest (e) {
      this.value = e.target.innerHTML;
    },
    // 加载数据
    async onLoad () {
      let result = await search(this.value, this.limit, this.offset + this.limit, this.searchResultValue);
      if (this.searchResultValue === 1) {
        this.musicList.push(...result.result.songs);
        this.offset = this.offset + this.limit;
        this.loading = false;
        // 数据全部加载完成
        if (this.musicList.length >= this.total) {
          this.finished = true;
        }
      } else if (this.searchResultValue === 1000) {
        this.gedanList.push(...result.result.playlists);
        this.offset = this.offset + this.limit;
        this.loading = false;
        // 数据全部加载完成
        if (this.gedanList.length >= this.total) {
          this.finished = true;
        }
      } else if (this.searchResultValue === 1004) {
        this.mvList.push(...result.result.mvs);
        this.offset = this.offset + this.limit;
        this.loading = false;
        // 数据全部加载完成
        if (this.mvList.length >= this.total) {
          this.finished = true;
        }
      }
    },
    // 搜索框获得焦点时
    focusFn () {
      // 全部置空
      this.isSearch = true;
    },
    // 清除搜索框内容时
    clearFn () {
      // 全部置空
      this.mvList = [];
      this.gedanList = [];
      this.musicList = [];
      this.offset = 0;
      this.total = 0;
      this.finished = false;
      this.isSearch = false;
    }
  },
  mounted () {
    this.getResouliebiaoFn();
  }
}
</script>

<style lang="less" scoped>
.van-loading{
  padding-top: 3rem;
}
.search {
	padding-top: 100/50rem;
}
.suggestions{
  margin-top: 20/50rem;
  padding-left: 20/50rem;
  .van-tag{
    padding: 20/50rem;
    margin-right: 20/50rem;
    font-size: 35/50rem;
    margin-bottom: 10/50rem;
  }
}
/deep/ .van-field__body{
  font-size: 35/50rem;
}
/deep/ .van-icon-search:before{
  font-size: 35/50rem;
  line-height: 35/50rem;
} 
.van-dropdown-menu{
	/deep/ .van-dropdown-menu__bar{
		width: 100%;
		z-index: 1;
		box-shadow: none;
		height: 100/50rem;
	/deep/ .van-dropdown-menu__title{
			font-size: 0.65rem;
			line-height: 1.3;
		}
	}
	/deep/ .van-cell__title{
		font-size: 0.62rem;
	}
  /deep/ .van-ellipsis{
    font-size: 0.6rem;
  } 
}
.music_res{
  .van-cell{
    height: 130/50rem;
    line-height: 1.4;
    .van-cell__value{
      .music_s{
        div:nth-child(1){
          font-size: 0.7rem;
        }
        div:nth-child(2){
          color: #888;
          font-size: 28/50rem;
        }
        &::before{
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 0;
          height: 0;
          transform: translateY(-50%);
          display: inline-block;
          border: 20/50rem solid transparent;
          border-left-color: #ccc;
        }
      }
    }
  }
}
.gedan_res{
  .van-cell{
		padding: 0;
		.van-cell__value{
			height: 5rem;
			display: flex;
			padding-left: 20/50rem;
			.img{
				margin: auto 0;
				width: 200/50rem;
				height: 200/50rem;
				background-color: pink;
				margin-right: 0.6rem;
			}
			.panels{
				margin-top: 30/50rem;
				p{
					font-size: 35/50rem;
					width: 380/50rem;
					margin: 0;
					line-height: 1.3;
				}
			}
			.van-icon:before{
				position: absolute;
				right: -1.7rem;
				top: 50%;
				color: #888;
				font-size: 40/50rem;
				transform: translateY(-50%);
			}	
		}
	}
}
.mv_res{
  .van-cell{
		padding: 40/50rem 20/50rem;
	}
  .van-cell__value{
   .mvs{
      .mvs_cover:nth-child(1){
        width: 700/50rem;
				height: 450/50rem;
				margin: 0 auto;
				overflow: hidden;
				border-radius: 50/50rem;
				background-color: pink;
				position: relative;
      }
      .mvs_info:nth-child(2){
        position: absolute;
				display: inline-block;
				bottom: 0;
				left: 0;
				width: 700/50rem;
				height: 75/50rem;
				text-align: center;
				line-height: 75/50rem;
				color: #fff;
				font-size: 32/50rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				background-color: rgba(0,0,0,.5);
      }
    }
  }
}
.van-list{
  margin-bottom: 70/50rem;
  /deep/ .van-list__finished-text{
    height: 100/50rem;
    line-height: 70/50rem;
    font-size: 28/50rem;
  }
}
</style>